<template>
    <div>
        <h1>---------首页的内容-----------</h1>

        价格:<input type="number" min="0" max="300" v-model="price">
        数量:<input type="number" min="0" max="100" v-model="num">
        
        <h3>根据您的条件筛选的商品</h3>

        <ul>
            <li v-for="(item, index) in $store.getters.selectGoods(price, num)" :key=index>{{item}}</li>
        </ul>

        <h2>商品数量:{{$store.state.count}}</h2>

        <button @click="add">+</button>
        <button @click="sub">-</button>

        <button @click="addGood">添加商品</button>

        <button @click="updateProfile">修改个人信息</button>
        <button @click="aupdateProfile">a修改个人信息</button>
    
        <h5>用户个人信息:{{$store.state.profile}}</h5>
    </div>
</template>

<script>
export default {
    name:"Home",
    data(){
        return {
            price:0,
            num:0
        }
    },
    methods:{
        add(){
            this.$store.commit("increment");
        },
        sub(){
            this.$store.commit("decrement");
        },
        addGood(){
            // this.$store.commit("addGood",  {id:108, name:"熊猫蚊香",price:12.9, num:67});
            this.$store.commit({
                type:"addGood",
                newGood:{
                    id:108, 
                    name:"熊猫蚊香",
                    price:12.9,
                    num:67
                }
            });
        },
        updateProfile(){
            this.$store.commit("updateProfile", {
                name:"隔壁老王",
                userId:"kef",
                pwd:"123456"
            });
        },
        
        aupdateProfile(){
            // this.$store.dispatch("aupdateProfile", "隔壁老王");

            // this.$store.dispatch("aupdateProfile", {
            //     name:"隔壁老王",
            //     userId:"kef",
            //     pwd:"123456"
            // });

            this.$store.dispatch({
                type:"aupdateProfile",
                newInfo:{
                    name:"隔壁老王",
                    userId:"uiyui",
                    pwd:"7890",
                    sex:"男"
                },
                // 声明了一个函数,但是我没有调用 
                // 等到一个合适的时机再调用
                // 等aupdateProfile更新完毕之后调用
                // 回调: 不立马调用的函数,等到一个合适的时机在调用
                succeed: () => {
                    console.log("数据更新成功!!");
                    // 后面跳转导航守卫,刷新子路由
                    console.log(this.$store.state.profile);
                    //console.log(this);
                }
            });
        }
    }
}
</script>

<style scoped>


</style>